import React, { useState, useEffect, useRef } from 'react'
import { Button, Row, Col, Form, Input, Alert, Spin, Radio, message } from 'antd'
import { connect } from 'dva'
const FormItem = Form.Item;


const Login = ({ loading, dispatch, login, }) => {
    const { errorMsg } = login;
    const [errorMsgVisible, setErrorMsgVisible] = useState(false);
    const [islg, setLogin] = useState('lg');
    const [loginForm] = Form.useForm();
    const [addForm] = Form.useForm();
    useEffect(() => {
        const visible = (errorMsg.message !== undefined && errorMsg.message !== null)
        setErrorMsgVisible(visible);
    }, [errorMsg])

    const hideErrorMsg = () => {
        setErrorMsgVisible(false);
    }

    const handleOk = values => {
        dispatch({
            type: 'login/loginUser',
            payload: values
        });
    }
    const addUser = (data) => {
        setLogin('lg')
        dispatch({
            type: 'login/addUser',
            payload: {
                ...data,
            },
        })
        setIsModal(false)
    }
    return <>
        {islg === "lg" ? <>
            <h1 style={{ textAlign: 'center' }}>用户登录</h1>
            <Form
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 18,
                }}
                form={loginForm}
                onKeyDown={(event) => {
                    if (event.key === 'Enter') {
                        event.preventDefault(); // 阻止默认行为
                        loginForm.submit(); // 提交表单
                    }
                }}
                onFinish={handleOk}
                onValuesChange={hideErrorMsg}
            ><Row>
                    <Col span={20} offset={2}>
                        <FormItem name="account" label="用户账号:"
                            rules={[{ required: true }]} hasFeedback>
                            <Input />
                        </FormItem>
                        <FormItem name="password" label="密码" rules={[{ required: true }]} hasFeedback>
                            <Input.Password type='password' />
                        </FormItem>
                        <FormItem name="userType" label="类型" rules={[{ required: true }]} hasFeedback>
                            <Radio.Group options={[{ label: "用户", value: 1 }, { label: "管理员", value: 0 }]} />
                        </FormItem>
                    </Col></Row>
                <Row>
                    <Col span={5} offset={6}>
                        <Button type="primary" style={{ width: "100%" }} htmlType="submit" loading={loading.effects.login}>登陆 </Button>
                    </Col>
                    <Col span={5} offset={2}>
                        <Button style={{ width: "100%" }} onClick={() => setLogin('add')}>注册</Button>
                    </Col>
                </Row>
                <div>{errorMsgVisible ? <Alert message={errorMsg.message} type="error" showIcon /> : null}</div>
            </Form>
        </> :
            <>
                <h1 style={{ textAlign: 'center' }}>用户注册</h1>
                <Form
                    labelCol={{
                        span: 6,
                    }}
                    form={addForm}
                    onFinish={addUser}
                ><Row>
                        <Col span={20} offset={2}>
                            <FormItem name="account" label="用户账号"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入您想添加的用户账号！',
                                    },
                                    {
                                        pattern: /^[A-Za-z0-9]+$/,
                                        message: '用户账号只能包含字母和数字!',
                                    },
                                    {
                                        pattern: /^.{5,15}$/,
                                        message: '用户账号长度为5-15位!',
                                    }
                                ]} hasFeedback>
                                <Input />
                            </FormItem>
                            <FormItem name="password" label="密码"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入用户密码！',
                                    },
                                    {
                                        pattern: /^[A-Za-z0-9!@#$%^&*()\-_=\+\[\]\{\}|;:'",.<>?\\]+$/,
                                        message: '密码仅允许出现大小写字母、数字和特殊字符！',
                                    },
                                    {
                                        pattern: /^.{6,18}$/,
                                        message: '用户密码长度为6-18位!',
                                    },]} hasFeedback>
                                <Input.Password type='password' />
                            </FormItem>
                            <FormItem label="社交昵称:" name="displayName" rules={[
                                {
                                    required: true,
                                    message: '请输入用户昵称！',
                                },
                                {
                                    pattern: /^.{1,10}$/,
                                    message: '用户昵称长度为1-10位!',
                                },
                                {
                                    pattern: /^[\u4e00-\u9fa5A-Za-z0-9]+$/,
                                    message: '用户昵称只能包含字母,数字和汉字!',
                                },]}>
                                <Input /></FormItem>
                        </Col></Row>
                    <br />
                    <Row>
                        <Col span={5} offset={6}>
                            <Button style={{ width: "100%" }} onClick={() => setLogin('lg')}>返回登录</Button>
                        </Col>
                        <Col span={5} offset={2}>
                            <Button type="primary" style={{ width: "100%" }} htmlType="submit">注册</Button>
                        </Col>
                    </Row>
                </Form>
            </>}
    </>
}
export default connect(({ loading, dispatch, login }) => ({
    loading, dispatch, login,
}))(Login);